<template>
    <div class="order-history-page">
        <h2>订单历史</h2>
        <div class="order-summary">
            <div v-if="loading" class="loading">加载中...</div>
            <div v-else-if="error" class="error">{{ error }}</div>
            <ul v-else class="order-list">
                <li v-for="order in orders" :key="order.id" class="order-item">
                    <h4>订单号: <span>{{ order.id }}</span></h4>
                    <p>下单时间: <span>{{ readableCreateTime(order.createTime) }}</span></p>
                    <p>订单状态: <span>{{ orderStatusText(order.status) }}</span></p>
                    <ul class="cart-list">
                        <li class="cart-item">
                            <div class="product-image">
                                <img :src="order.image" :alt="order.itemName" style="width: 100px; height: 100px;">
                            </div>
                            <h3>{{ order.itemName }}</h3>
                            <p>  单价: {{ order.itemPrice }}</p>
                            <p>  购买数量: {{ order.count }}</p>
                            <p>  总计: {{ (order.itemPrice * order.count).toFixed(2) }}</p>
                            <button v-if="order.status === 0" @click="goToPayment()" class="pay-button">去支付</button>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import instance from '@/utils/request';
export default {
    filters: {
        formatDate(value) {
            const date = new Date(value);
            const datePart = date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            const timePart = date.toLocaleTimeString('zh-CN', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });
            return `${datePart} ${timePart}`;
        }
    },
    data() {
        return {
            loading: true,
            error: null,
            orders: []
        };
    },
    created() {
        this.fetchOrders();
    },
    methods: {
        async fetchOrders() {
            try {
                const response = await instance.get(`http://8.219.49.219:8080/onlineShopping/shoppingCar/getOrders`);
                const data = response.data.data;
                this.orders = data.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
            } catch (err) {
                this.error = err.message;
            } finally {
                this.loading = false;
            }
        },
        readableCreateTime(createTime) {
            const date = new Date(createTime);
            const datePart = date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            const timePart = date.toLocaleTimeString('zh-CN', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });
            return `${datePart} ${timePart}`;
        },
        orderStatusText(status) {
            return status === 1 ? '已购买' : '待支付';
        },
        goToPayment() {
            this.$router.push('/payment');  
        }
    }
};
</script>

<style scoped>
.order-history-page {
    font-family: Arial, sans-serif;
    max-width: 960px;
    margin: 0 auto;
}

.order-summary {
    margin: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.order-list {
    list-style-type: none;
    padding: 0;
}

.order-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.order-item h4, .order-item p {
    margin: 5px 0;
}

.cart-list {
    list-style-type: none;
    padding: 0;
    margin-top: 15px;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.product-image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
}

.cart-item h3, .cart-item p {
    margin: 0 10px;
    color: #333;
}

.loading, .error {
    text-align: center;
    color: #777;
}

.error {
    color: red;
}
h4, p {
    margin-bottom: 20px; 
}
.pay-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px; 
}

.pay-button:hover {
    background-color: #0056b3;
}
</style>

